<template>
  <view class="pay">
    <!-- 1 收货地址 -->
    <view class="address-wrap">
      <view
        v-if="!address"
        class="address-btn-wrap u-text-center u-p-30 "
      >
        <u-button
          plain
          shape="circle"
          type="error"
          size="medium"
          @click="handleChooseAddress"
        >获取收货地址</u-button>
      </view>

      <view
        class="address-info u-p-30"
        v-else
      >
        <view class="address-detail"> {{detailAddress}} </view>
        <view class="address-user u-m-t-20 u-flex">
          <text class="u-m-r-20">{{address.userName}}</text>
          <text>{{address.telNumber}}</text>
        </view>
      </view>
    </view>
    <u-line color="#eee"></u-line>
    <u-line color="#eee"></u-line>
    <u-line color="#eee"></u-line>
    <u-line color="#eee"></u-line>

    <!-- 2 已选商品 -->
    <view class="checked-list">
      <view class="checked-list-title u-p-20">已选商品</view>
      <view class="checked-list-content">
        <view
          class="cart-item"
          v-for="(item ) in checkedCartList"
          :key="item.goods_id"
        >

          <!-- 图片 -->
          <view class="cart-img">
            <u-image
              width="190rpx"
              height="190rpx"
              :src="item.goods_small_logo"
            ></u-image>
          </view>
          <!-- 商品信息 -->
          <view class="cart-info">
            <view class="goods-name u-line-2">{{item.goods_name}}</view>
            <view class="goods-tool">
              <view class="goods-price">￥{{item.goods_price}}</view>
              <view class="goods-num-change">
                <view class="num-value">X{{item.num}}</view>
              </view>
            </view>
          </view>
        </view>

      </view>

    </view>

    <!-- 2 统计栏结构 -->
    <view class="statistics">

      <!-- 合计 -->
      <view class="total">
        合计：
        <text class="rmb">￥</text>
        <text class="total-price">{{totalPrice}}</text>
      </view>
      <!-- 结算 -->
      <u-button
        @click="handlePay"
        type="error"
        :custom-style="{fontSize:'26rpx',width:'220rpx',height:'52rpx',borderRadius:'26rpx'}"
      >去支付（{{totalCount}}）</u-button>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations, mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      // 收货地址
      // address: null,
    };
  },
  computed: {
    ...mapState(["token"]),
    ...mapGetters(["checkedCartList", "totalCount", "totalPrice", "address"]),
    // 详细收货地址
    detailAddress() {
      if (!this.address) return "";
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
  },
  methods: {
    ...mapMutations(["setAddress"]),
    ...mapActions(["fetchToken"]),
    // 获取收货地址
    async handleChooseAddress() {
      /* 
      如果 没有收货地址 显示 按钮 
      有收货地址 显示 收货地址信息
       */
      //  调用小程序的获取收货地址
      const [err, address] = await uni.chooseAddress();
      console.log(address);
      this.setAddress(address);
    },
    // 微信支付功能
    async handlePay() {
      /* 
      1 先判断选择收货地址 
        没有  提示
      2 有 跑微信支付的流程
        1 前端 想要完整都了解微信支付的整个流程 做不到！！ 
        2 关心前端部分 微信支付即可！！ 
       */

      // if (!this.address) {
      //   uni.showToast({ title: "您还没有选择收货地址", icon: "none" });
      //   return;
      // }

      if (!this.token) {
        await this.fetchToken();
      }

      // console.log(token);
      // console.log(this.token);

      // 构造创建订单要的参数
      const orderParams = {
        // 是	string	订单总价格
        order_price: this.totalPrice,
        // 是	string	收货地址 + - 姓名 + - 号码
        consignee_addr:
          this.detailAddress +
          "-" +
          this.address.userName +
          "-" +
          this.address.telNumber,
        // 是	Array	订单数组
        goods: this.checkedCartList.map((goods) => ({
          // number	商品id
          goods_id: goods.goods_id,
          // number	购买的数量
          goods_number: goods.num,
          // number	单价
          goods_price: goods.goods_price,
        })),
      };

      // 发送请求 完成订单的创建了
      const res4 = await this.$u.post("/my/orders/create", orderParams);
      // console.log(res4);
      // 获取订单编号
      const { order_number } = res4.message;

      // 获取支付参数
      const res5 = await this.$u.post("/my/orders/req_unifiedorder", {
        order_number,
      });

      // 支付参数
      const { pay } = res5.message;

      // 调起微信支付
      const res6 = await uni.requestPayment(pay);

      // console.log(res6);
      // 查询当前订单 是否已经支付
      const res7 = await this.$u.post("/my/orders/chkOrder", { order_number });
      console.log(res7);
      // 是  提示用户 或者跳转页面 跳转订单页面。。。

      // 失败。。。提示
    },
  },
};
</script>

<style lang="scss">
.pay {
  padding-bottom: 83rpx;
}
.checked-list-content {
}
.cart-item {
  padding: 20rpx;
  display: flex;

  .chk {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    checkbox {
    }
  }

  .cart-img {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart-info {
    flex: 3;
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .u-line-2 {
    }

    .goods-tool {
      display: flex;
      justify-content: space-between;
      .goods-price {
        color: $themeColor;
      }

      .goods-num-change {
        display: flex;
        color: #666;
        .num-btn {
          width: 36rpx;
          height: 36rpx;
          border: 1rpx solid #666;
          border-radius: 50%;

          display: flex;
          align-items: center;
          justify-content: center;
        }

        .num-value {
          margin: 0 20rpx;
        }
      }
    }
  }
}
.statistics {
  height: 83rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #ccc;
  display: flex;
  padding: 0 10rpx;
  align-items: center;

  .all-chk {
    padding: 0 10rpx;
    checkbox {
    }
  }

  .total {
    flex: 1;
    .rmb {
      color: $themeColor;
      font-size: 20rpx;
    }

    .total-price {
      color: $themeColor;
    }
  }
}
</style>